<template>
    <div class="scrollbar" style="height: 650px;overflow: auto;">
        <div class="title" style="margin-bottom: 20px;">
            <div style="font-size: 16px;font-weight: 600">基础信息</div>
        </div>
        <div class="" style="margin-bottom: 20px;">
            <div class="flex" style="margin-bottom: 12px;">
                <div class="flex_1">客户名称：{{props.formData.dept.name}}</div>
                <div class="flex_1">合同名称：{{props.formData.name}}</div>
                <div class="flex_1">合同号：{{props.formData.contract_no}}</div>
            </div>
            <div class="flex" style="margin-bottom: 12px;">
                <div class="flex_1">合同有效期：{{props.formData.start_time}} ~ {{props.formData.end_time}}</div>
                <div class="flex_1">免费堆放天数：{{props.formData.zc_day}}</div>
                <div class="flex_1">免费仓储天数：{{props.formData.cc_day}}</div>
            </div>
            <div class="flex" >
                <div class="" style="width: calc(100% / 3);">结算方式：{{ handlePayMethod(props.formData.pay_method )}}</div>
                <div class="flex_1 flex">
                    <div>合同附件：</div>
                    <div v-if="props.formData.annex != null">
                        <div v-for="(item,index) in props.formData.annex" :key="index">
                            <a-link @click="openFile(item)">{{item}}</a-link>
                        </div>
                    </div>
                    <div v-else>无</div>
                </div>
            </div>
        </div>
        <div class="title" style="margin-bottom: 20px;">
            <div style="font-size: 16px;font-weight: 600">价格政策</div>
        </div>
        <div style="margin-bottom: 20px;">
            <a-table :columns="priceColumns" :data="priceList" :pagination="false" :bordered="{wrapper: true, cell: true}">
                <template #weight_type="{record}">
                    <div>
                        {{ handleweightType(record.weight_type) }}
                    </div>
                </template>
                <template #billing_node="{record}">
                    <div>
                        {{ handlebillingNode(record.billing_node) }}
                    </div>
                </template>
                <template #is_checked="{record}">
                    <div>
                        {{ record.is_checked == 1?'勾选':'不勾选' }}
                    </div>
                </template>
                <template #price_config="{record}">
                    <div v-if="record.price_type == 17 || record.price_type == 20 || record.price_type == 12" style="width: 100%;">
                        <div v-for="(item,index) in record.price_config" :key="index">
                            <div v-if="item.transport_type == 1" class="flex" style="margin-bottom: 12px;width: 100%;">
                                <div style="width: 160px;" class="text_center">集装箱：</div>
                                <div class="flex_1" style="text-align: start;">
                                    <span v-for="(items,indexs) in item.jieti_data" :key="indexs" style="margin-right: 12px;">{{ items.box_size == 1?'20英尺':'40英尺' }}：{{items.range}} {{handleunit(items.unit)}}/ {{items.price}}元;</span> 
                                </div>
                            </div>
                            <div v-if="item.transport_type == 2" class="flex" style="margin-bottom: 12px;width: 100%;">
                                <div style="width: 160px;" class="text_center">整车：</div>
                                <div class="flex_1" style="text-align: start;">
                                    <span style="margin-right: 12px;" v-for="(items,indexs) in item.jieti_data" :key="indexs">{{items.range}}{{handleunit(items.unit)}}/{{items.price}}元;</span> 
                                </div>
                            </div>
                            <div v-if="item.transport_type == 3" class="flex" style="margin-bottom: 12px;width: 100%;">
                                <div style="width: 160px;" class="text_center">批量快运：</div>
                                <div class="flex_1" style="text-align: start;">
                                    <span v-for="(items,indexs) in item.jieti_data" :key="indexs" style="margin-right: 12px;">{{items.range}}{{handleunit(items.unit)}}/{{items.price}}元;</span> 
                                </div>
                            </div>
                        </div>
                    </div>
                    <div v-else style="width: 100%;">
                        <div v-for="(item,index) in record.price_config" :key="index">
                            <div v-if="item.transport_type == 1" class="flex" style="margin-bottom: 12px;width: 100%;">
                                <div style="width: 160px;" class="text_center">集装箱：</div>
                                <div v-if="item.is_goods != 1" class="flex_1" style="text-align: start;">
                                    <span v-for="(items,indexs) in item.box" :key="indexs" style="margin-right: 12px;">{{ items.box_size == 1?'20英尺':'40英尺' }}：{{items.price}}元/{{handleunit(items.unit)}};</span> 
                                </div>
                                <div v-else class=" ">按集装箱装卸费率计算;</div> 
                            </div>
                            <div v-if="item.transport_type == 2" class="flex" style="margin-bottom: 12px;width: 100%;">
                                <div style="width: 160px;" class="text_center">整车：</div>
                                <div class="flex_1" style="text-align: start;">
                                    <div v-if="item.is_goods != 1">{{item.price}}元/{{handleunit(item.unit)}};</div> 
                                    <div v-else>按品名装卸费率计算;</div> 
                                </div>
                            </div>
                            <div v-if="item.transport_type == 3" class="flex" style="margin-bottom: 12px;width: 100%;">
                                <div style="width: 160px;" class="text_center">批量快运：</div>
                                <div class="flex_1" style="text-align: start;">
                                    <div v-if="item.is_goods != 1">{{item.price}}元/{{handleunit(item.unit)}}； {{ item.limit_weight != ''?`不足 ${item.limit_weight} 吨，按此重量作为最低重量计费;`:'' }}</div> 
                                    <div v-else>按品名装卸费率计算;</div> 
                                </div>
                            </div>
                        </div>
                    </div>
                </template>
            </a-table>
        </div>
        <div class="title" style="margin-bottom: 20px;">
            <div style="font-size: 16px;font-weight: 600">关联品名</div>
        </div>
        <div style="margin-bottom: 20px;">
            <a-table :columns="goodsColumns" :data="goodsList" :pagination="false" :bordered="{wrapper: true, cell: true}">
                <template #dept_id="{record}">
                    <div>
                        {{ record.dept.name }}
                    </div>
                </template>
                <template #contract_id="{record}">
                    <div>
                        {{ record.contract.name }}
                    </div>
                </template>
                <template #goods_id="{record}">
                    <div>
                        {{record.goods == null?'':record.goods.name }}
                    </div>
                </template>
                <template #goods="{record}">
                    <div>
                        {{record.goods == null?'':record.goods.sku }}
                    </div>
                </template>
            </a-table>
        </div>
        <div class="title" style="margin-bottom: 20px;">
            <div style="font-size: 16px;font-weight: 600">地址管理</div>
        </div> 
        <div>
            <a-table :columns="addressColumns" :data="addressList" :pagination="false" :bordered="{wrapper: true, cell: true}">
                <template #guanxiaqu="{record}">
                    <div>
                        {{ handleguanxiaqu(record.guanxiaqu) }}
                    </div>
                </template>
                <template #daodadi="{record}">
                    <div>
                        {{ handledaodadi(record.daodadi) }}
                    </div>
                </template>
                <template #price_config="{record}">
                    <div  style="width: 100%;">
                        <div v-for="(item,index) in record.price_config" :key="index">
                            <div v-if="item.transport_type == 1" class="flex" style="margin-bottom: 12px;width: 100%;">
                                <div style="width: 160px;" class="text_center">集装箱：</div>
                                <div  class="flex_1" style="text-align: start;">
                                    <span v-for="(items,indexs) in item.box" :key="indexs" style="margin-right: 12px;">{{ items.box_size == 1?'20英尺':'40英尺' }}：{{items.price}}元/{{handleunit(items.unit)}};</span> 
                                </div>
                            </div>
                            <div v-if="item.transport_type == 2" class="flex" style="margin-bottom: 12px;width: 100%;">
                                <div style="width: 160px;" class="text_center">整车：</div>
                                <div class="flex_1" style="text-align: start;">
                                    <div >{{item.price}}元/{{handleunit(item.unit)}};</div> 
                                </div>
                            </div>
                            <div v-if="item.transport_type == 3" class="flex" style="margin-bottom: 12px;width: 100%;">
                                <div style="width: 160px;" class="text_center">批量快运：</div>
                                <div class="flex_1" style="text-align: start;">
                                    <div v-if="item.price != ''">{{item.price}}元/{{handleunit(item.unit)}}；</div> 
                                    <div v-else></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </template>
                
            </a-table>
        </div>
    </div>
</template>

<script setup>
    import { ref, reactive,defineProps,onMounted } from "vue";
    import { Message } from '@arco-design/web-vue'
    import tool from '@/utils/tool'
    import commonApi from "@/api/common";
    import * as common from '@/utils/common'
    import { request } from "@/utils/request.js";
    const props = defineProps({
        formData: {
            default: {},
        },
    });
    const priceList = ref([])
    const goodsList = ref([])
    const addressList = ref([])
    const weightTypeList = ref([])
    const jifeiArr = ref([])
    const unitList = ref([])
    const guanxiaquArr = ref([])
    const daodadiArr = ref([])
    onMounted(()=>{
        console.log('9999',props.formData)
        // 价格列表
        handlePriceList()
        // 品名列表
        handleGoodList()
        // 地址列表
        handleAddressList()
        commonApi.getDict("weight_type").then((res) => {
            let _data = res.data;
            _data.map((v,i)=>{
            v.value = v.key
            })
            weightTypeList.value = _data
        });
        commonApi.getDict("billing_node").then((res) => {
            jifeiArr.value = res.data;
        });
        commonApi.getDict("guanxiaqu").then((res) => {
            guanxiaquArr.value = res.data;
        });
        commonApi.getDict("daodadi").then((res) => {
            daodadiArr.value = res.data;
        });
        request({
            url:'financial/unit/index',
            method: 'get',
            params:{
                openPage:false
            },
        }).then(res=>{
            unitList.value = res.data.items
        })
    })
    const openFile = (url) => {
        // 假设文件URL是http://example.com/file.pdf
        window.open(url, '_blank');
    };
    const handleguanxiaqu = (item)=>{
        let name = ''
        guanxiaquArr.value.map((v,i)=>{
            if(v.key == item){
            name = v.title
            }
        })
        return name
    }
    const handledaodadi = (item)=>{
        let name = ''
        daodadiArr.value.map((v,i)=>{
            if(v.key == item){
            name = v.title
            }
        })
        return name
    }
    const handleweightType = (item)=>{
        let name = ''
        weightTypeList.value.map((v,i)=>{
            if(v.key == item){
            name = v.title
            }
        })
        return name
    }
    const handleunit = (item)=>{
        let name = ''
        unitList.value.map((v,i)=>{
            if(v.id == item){
            name = v.name
            }
        })
        return name
    }
    const handlebillingNode = (item)=>{
        let name = ''
        jifeiArr.value.map((v,i)=>{
            if(v.key == item){
            name = v.title
            }
        })
        return name
    }
    
    const handlePayMethod = (item)=>{
        let arr = []
        let arrs = [
            {label: '预付', value: '1'},
            {label: '周期结算', value: '2'},
            {label: '现结', value: '3'},
        ]
        arrs.map((v,i)=>{
            item.map((vv,ii)=>{
                if(vv == v.value){
                    arr.push(v.label)
                }
            })
        })
        return arr.join('、')
    }
    const handlePriceList = ()=>{
        request({
            url: 'system/userContractCharging/index',
            method: 'get',
            params: {
                pageSize: 50,
                contract_id:props.formData.id
            }
        }).then(res => {
            priceList.value = res.data.items
        })
    }
    const handleGoodList = ()=>{
        request({
            url: 'system/userContractGoods/index',
            method: 'get',
            params: {
                pageSize: 50,
                contract_id:props.formData.id
            }
        }).then(res => {
            goodsList.value = res.data.items
        })
    }
    const handleAddressList = () =>{
        request({
            url: 'system/userContractAddress/index',
            method: 'get',
            params: {
                pageSize: 50,
                contract_id:props.formData.id
            }
        }).then(res => {
            addressList.value = res.data.items
        })
    }
    const priceColumns = ref([
        {
            title: '费用名称',
            dataIndex: 'name',
            align:'center',
        },
        {
            title: '计费规则',
            dataIndex: 'price_config',
            width:800,
            align:'center',
            slotName:'price_config'
        },
        {
            title: '计费重量',
            dataIndex: 'weight_type',
            align:'center',
            slotName:'weight_type'
        },
        {
            title: '计费节点',
            dataIndex: 'billing_node',
            align:'center',
            slotName:'billing_node'
        },
        {
            title: '是否默认勾选账单',
            dataIndex: 'is_checked',
            align:'center',
            slotName:'is_checked'
        },
    ])
    const goodsColumns = ref([
        {
            title: '合同公司',
            dataIndex: 'dept_id',
            align:'center',
            slotName:'dept_id'
        },
        {
            title: '合同名称',
            dataIndex: 'contract_id',
            align:'center',
            slotName:'contract_id'
        },
        {
            title: '品名',
            dataIndex: 'goods_id',
            align:'center',
            slotName:'goods_id'
        },
        
        {
            title: '创建时间',
            dataIndex: 'updated_at',
            align:'center',
        },
    ])
    const addressColumns = ref([
        {
            title: '管辖区',
            dataIndex: 'guanxiaqu',
            align:'center',
            slotName:'guanxiaqu'
        },
        {
            title: '到达区',
            dataIndex: 'daodadi',
            align:'center',
            slotName:'daodadi'
        },
        {
            title: '详细地址',
            dataIndex: 'address',
            align:'center',
        },
        {
            title: '计费规则',
            dataIndex: 'price_config',
            align:'center',
            slotName:'price_config'
        },
    ])
</script>


<style scoped>
    .scrollbar::-webkit-scrollbar {
        display: none;
    }
</style>

<script> export default { name: 'userContract:detailtext' } </script>